<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>用户注册</title>
    <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="bg"></div>
<div id="main">
    <div id="layout">
        <div class="layout-img">
            <div>
                <p>BILIBILI</p>
                <p>某科学的超电磁炮</p>
            </div>
        </div>
        <div class="content-info">
            <form id="myform" action="#" method="post">
                <div class="input-bar">
                    <label>U</label>
                    <input type="text" id="username-input" name="uname" placeholder="请输入手机号" maxlength="11">
                </div>
                <div class="input-bar">
                    <label>C</label>
                    <input id="code-input" type="text" name="ucode" placeholder="请输入验证码" maxlength="6"/>
                    <input type="button" id="code-btn" value="获取验证码" @click="code_btn">
                </div>
                <div><input type="button" id="submit-btn" value="登录" @click="login"/></div>
                <div id="gitee">第三方登录<a href="/gitee/auth"><img src="imgGitee/gitee.png" width="60px"></a></div>
            </form>
        </div>
    </div>
</div>
</body>
<script type="text/javascript">
    (() => {
        let cd = null;

        class Code {
            constructor(id) {
                this.myfrom = document.querySelector(id);
                this.init();
                this.check();
                this.getCodeBtn.onclick = () => {
                    if (this.lock) this.getCode()
                };
            }

            init() {
                cd = this;
                this.userNameInput = this.myfrom.querySelector('#username-input');
                this.codeInput = this.myfrom.querySelector('#code-input');
                this.getCodeBtn = this.myfrom.querySelector('#code-btn');
                this.OneMinute = 60;
                this.second = this.OneMinute;
                this.lock = true;
                this.timer = null;
                if (performance.navigation.type == 1) {
                    this.userNameInput.value = '';
                    this.codeInput.value = '';
                }
            }

            check() {
                let lock1 = false;
                let lock2 = false;
                this.userNameInput.onfocus = () => {
                    this.userNameInput.parentNode.style = 'border-bottom:1px solid #AAA';
                }
                this.userNameInput.onblur = () => {
                    let regExp = /^[1](([3][0-9])|([4][5-9])|([5][0-3,5-9])|([6][5,6])|([7][0-8])|([8][0-9])|([9][1,8,9]))[0-9]{8}$/;
                    if (!regExp.test(this.userNameInput.value)) {
                        this.userNameInput.parentNode.style = 'border-bottom:1px solid #F00';
                        lock1 = false;
                    } else {
                        lock1 = true;
                    }
                }
                this.codeInput.onfocus = () => {
                    this.codeInput.parentNode.style = 'border-bottom:1px solid #AAA';
                }
                this.codeInput.onblur = () => {
                    let regExp = /^[0-9]{6}$/;
                    if (!regExp.test(this.codeInput.value)) {
                        this.codeInput.parentNode.style = 'border-bottom:1px solid #F00';
                        lock2 = false;
                    } else {
                        lock2 = true;
                    }
                }
                this.myfrom.onsubmit = () => {
                    if (lock1 && lock2) {
                        window.open('./userInfo.html', '_self').location;
                    }
                    return false;
                }

            }

            getCode() {
                cd.lock = false;
                cd.getCodeBtn.style = 'color: #CCC; cursor: not-allowed;';
                cd.render(cd.second + ' 秒后重发');
                cd.second--;
                cd.timer = setInterval(() => {
                    cd.render(cd.second + ' 秒后重发');
                    cd.second--;
                    if (cd.second === -1) {
                        cd.second = this.OneMinute;
                        cd.lock = true;
                        clearInterval(cd.timer);
                        cd.getCodeBtn.style = 'color: rgb(0, 175, 227); cursor: pointer;';
                        cd.render('获取验证码');
                    }
                }, 1000);
            }

            render(str) {
                cd.getCodeBtn.setAttribute('value', str);
            }
        }

        new Code('#myform');
    })();
</script>
<script>
    new Vue({
        el: "#main",
        data: {code: null},
        methods: {
            code_btn() {
                axios.post('/login/sendCode', {
                    tel: $("#username-input").val(),
                }).then(res => {
                    console.log(res.data)
                    alert(res.data.msg)
                })
            },
            login() {
                let codeText = $("#code-input").val()
                let phoneNumber = $("#username-input").val();
                axios.post(('/login/phoneVerification'), {
                    tel: phoneNumber,
                    telCode: codeText
                }).then(res => {
                    console.log(res.data.data)
                    console.log(res.data.data.substr(0,res.data.data.indexOf("&")))
                    console.log(res.data.data.split("&")[1])
                    if (res.data.status) {
                        // localStorage.setItem("tel", phoneNumber)
                        window.open("userinfo.html?token="+res.data.data)
                    } else {
                        alert(res.data.msg)
                    }
                })
            }
        }
    })
</script>

<style type="text/css">
    #gitee {
        margin: -15px 0 0 100px;
        line-height: 40px;
    }
    * {
        margin: 0;
        padding: 0;
        list-style: none;
        text-decoration: none;
        box-sizing: border-box;
        vertical-align: top;
    }

    html, body {
        width: 100%;
        height: 100%;
    }

    .bg {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background-image: url('https://ss0.baidu.com/94o3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/50da81cb39dbb6fdfaede00c0a24ab18972b3761.jpg');
        background-repeat: no-repeat;
        background-position: 0 -100px;
        background-size: 100% auto;
        pointer-events: none;
        user-select: none;
        z-index: -1;
    }

    #main {
        width: 100%;
        height: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    #layout {
        width: 1000px;
        height: 600px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
    }

    .layout-img {
        width: 40%;
        height: 100%;
        background-color: rgba(253, 253, 246, 0.3);
        display: flex;
        justify-content: center;
        align-items: center;
        font: 32px/150% "times new roman", "楷体";
        color: #FFF;
        pointer-events: none;
        user-select: none;
    }

    .content-info {
        width: 60%;
        height: 100%;
        background-color: rgba(255, 255, 255, 0.96);
        padding: 16% 10%;
    }

    .content-info form {
        width: 100%;
        height: 100%;
    }

    .content-info form div {
        width: 100%;
        text-align: left;
        margin: 60px 0 30px 0;
    }

    .content-info form .input-bar {
        border-bottom: 1px solid #AAA;
        margin: 10px 0 30px 0;
    }

    .content-info form .input-bar input {
        border: 0;
        background-color: rgba(0, 0, 0, 0);
        height: 40px;
        /* border: 1px solid #F00; */
    }

    .content-info form .input-bar input[type='text'] {
        outline: none;
        width: 270px;
        padding: 0 0 0 50px;
        font: 21px/100% "times new roman", "楷体";
    }

    .content-info form .input-bar label {
        display: block;
        width: 35px;
        height: 35px;
        position: absolute;
        pointer-events: none;
        user-select: none;
        color: rgb(255, 255, 255);
        background-color: rgba(0, 175, 227, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        border-radius: 2px;
    }

    .content-info form .input-bar input[type='button'] {
        cursor: pointer;
        font: 18px/100% "times new roman", "楷体";
        padding: 0 15px;
        color: rgb(0, 175, 227);
    }

    #submit-btn {
        border: 0;
        width: 100%;
        height: 50px;
        font: 21px/100% "楷体";
        text-align: center;
        cursor: pointer;
        border-radius: 50px;
        color: rgba(255, 255, 255, 1);
        background-color: rgb(0, 175, 227);
        transition: background-color 200ms;
    }

    #submit-btn:hover {
        background-color: rgba(0, 175, 227, 0.8);
    }

    #submit-btn:active {
        background-color: rgba(0, 175, 227, 0.5);
    }
</style>

</html>
